<template>
  <el-menu
    class="el-menu-vertical"
    :default-active="active"
    :collapse="isCollapse"
    router
  >
    <template v-for="item in leftMenu.menuData">
      <template v-if="item.children">
        <el-sub-menu
          :index="item.url"
          v-if="item.children && item.children.length > 0"
        >
          <template #title
            ><el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <template v-for="child in item.children">
            <el-menu-item
              :index="child.url"
              @click="toTab(child.title, child.url)"
            >
              <el-icon><component :is="child.icon" /></el-icon
              ><template #title>{{ child.title }}</template></el-menu-item
            >
          </template>
        </el-sub-menu>
      </template>
      <template v-else>
        <el-menu-item :index="item.url" @click="toTab(item.title, item.url)"
          ><el-icon><component :is="item.icon" /></el-icon>
          <template #title>{{ item.title }}</template></el-menu-item
        >
      </template>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      editableTabsValue: "0", //选中状态的 name
      active: "home",
      leftMenu: {
        isCollapse: false,
        menuData: [
          {
            icon: "House",
            url: "home",
            title: "首页",
          },
          {
            icon: "Document",
            url: "SingleColumn",
            title: "表单管理",
            children: [
              {
                url: "SingleColumn",
                title: "单列表单",
                icon: "Document",
              },
              {
                url: "MultiColumn",
                title: "多列表单",
                icon: "Document",
              },
              {
                url: "Grouping",
                title: "分组表单",
                icon: "Document",
              },
              {
                url: "Tabs",
                title: "标签页表单",
                icon: "Document",
              },
              {
                url: "MasterSlave",
                title: "主从表单",
                icon: "Document",
              },
              {
                url: "Responsive",
                title: "响应式表单",
                icon: "Document",
              },
              {
                url: "QuestionnaireSurvey",
                title: "问卷调查表单",
                icon: "Document",
              },
              {
                url: "FixedTable",
                title: "固定表格表单",
                icon: "Document",
              },
            ],
          },
          {
            icon: "Stamp",
            url: "person",
            title: "系统管理",
            children: [
            {
              url: "user",
              title: "用户管理",
              icon: "House",
            },
            {
              url: "role",
              title: "角色管理",
              icon: "House",
            },
            {
              url: "menu",
              title: "菜单管理",
              icon: "House",
            },
          ],
          },
        ],
      },
      editableTabs: [
        //默认存在的 tabs
        {
          icon: "el-icon-suitcase",
          path: "home",
          title: "首页",
          name: "0",
        },
      ],
    };
  },
  methods: {
    //添加 tabs 标签页 ,传递的 name 是title
    toTab(name, url) {
      this.active = url;
      //添加之前需要 判断是否已经包含，
      let isHave = false;
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].title == name) {
          //存在，包含
          isHave = true;
          this.editableTabsValue = this.editableTabs[i].name;
        }
      }
      if (isHave == false) {
        this.editableTabs.push({
          title: name,
          name: name,
          path: url,
        });
        this.editableTabsValue =
          this.editableTabs[this.editableTabs.length - 1].name;
      }
      //本地存储值
      localStorage.sessTabs = JSON.stringify(this.editableTabs);
      localStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
    },
  },
};
</script>
<style scoped>
.el-menu-vertical,
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
  /* background-color: #30363d; */
  color: #fff;
}
.el-menu--collapse {
  width: 64px;
}
.titleName {
  font-size: 24px;
  font-weight: 600;
}
.menu {
  font-size: 14px;
}
</style>
